<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>华南农业大学实验室报修系统</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" th:href="@{~/mobile/common.css}" type="text/css">
</head>
<body>
	<div class="weui-panel weui-panel_access">
		<div class="weui-panel__hd">订单详情和流程：</div>

		<div class="weui-form-preview">

			<input type="hidden" id="taskid" value="${taskId}">
			<input type="hidden" id="recordid" value="${record.id}">
			<div class="weui-form-preview__hd">
				<label class="weui-form-preview__label">订单地点：</label>
				<em id="areaid" class="weui-form-preview__value">${record.area!}</em>
			</div>
			<div class="weui-form-preview__bd">
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">设备ID：</label>
					<span class="weui-form-preview__value">${record.equipmentId!}</span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">设备名称：</label>
					<span class="weui-form-preview__value">${record.equipmentName!}</span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">报修人姓名：</label>
					<span class="weui-form-preview__value">${record.registrantName!} </span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">报修人学号：</label>
					<span class="weui-form-preview__value">${record.registrantNumber!}</span>
				</div>
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">订单详情：</label>
					<span class="weui-form-preview__value">${record.detail!}</span>
				</div>

				<div id="recordPhotoList" class="weui-form-preview__item">
					<label class="weui-form-preview__label">订单照片(点击放大)：</label>

					<a id="recordPhotoItem" href="javascript:;" style="float:right" class="weui-btn weui-btn_mini weui-btn_primary">查看图片</a>
				</div>
				@@	if(proc != null && proc.assignee == "" ){$$
				@@		if(isLeader == true){$$
				<div class="weui-form-preview__item">
					<label class="weui-form-preview__label">请选择一名员工来接管订单：</label>

					<select class="weui-select" id="staffSelect">
					</select>
				</div>
				@@		} $$
				@@	 	else { $$
					<input id="staffId" type="hidden" value="${staffId!}">
				@@		} $$
				@@	} $$
			</div>
		</div>
		@@ if((isStaff == true || isLeader == true) && proc != null){ $$
			@@	if(proc.assignee == ""){$$
			<div class="weui-panel__ft">
				<div class="weui-btn-area">
					<a class="weui-btn weui-btn_primary" onclick="claim()">接管</a>
				</div>
			</div>
			@@ } $$
			@@ else if(isStaff == true && proc.endTime == null){$$

			<div class="weui-gallery" id="gallery">
				<span class="weui-gallery__img" id="galleryImg"></span>
				<div class="weui-gallery__opr">
					<a href="javascript:" class="weui-gallery__del">
						<i class="weui-icon-delete weui-icon_gallery-delete"></i>
					</a>
				</div>
			</div>
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<div class="weui-uploader">
							<div class="weui-uploader__hd">
								<p class="weui-uploader__title">请选择图片上传，将与记录内容一起保存</p>
							</div>
							<div class="weui-uploader__bd">
								<ul class="weui-uploader__files" id="uploaderFiles">

								</ul>
								<div class="weui-uploader__input-box">
									<input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="weui-panel__ft">
				<div class="weui-btn-area">
					<a class="weui-btn weui-btn_primary" onclick="progress()">记录</a>
				</div>
			</div>
			<div class="weui-panel__ft">
				<div class="weui-btn-area">
					<a class="weui-btn weui-btn_warn" onclick="unclaim()">撤手</a>
				</div>
			</div>
			<div class="weui-panel__ft">
				<div class="weui-btn-area">
					<a class="weui-btn weui-btn_primary" onclick="complete()">完成</a>
				</div>
			</div>
			@@ } $$
		@@ } $$



		<div class="weui-panel__ft">
			<div class="weui-cell weui-cell_access weui-cell_link">
				<div class="weui-cell__bd">订单日志：</div>
			</div>
		</div>
		<div class="weui-panel__bd" >
			@@ if(notes.~size == 0){ $$
				<div class="weui-media-box weui-media-box_appmsg">
					<div class="weui-media-box__bd">
						<h4 class="weui-media-box__title">暂无记录</h4>
					</div>
				</div>
			@@ } $$
			@@ else {$$
			@@ for(note in notes!){ $$
			<div class="weui-media-box weui-media-box_appmsg">
				<div class="weui-media-box__bd">
					<h4 class="weui-media-box__title">${note.staff}于${note.createTime}
						<span style="float:right">
							<a href="javascript:;" onclick="showNoteImage(${note.id!})" class="weui-btn weui-btn_mini weui-btn_primary notePhotoItem">查看图片</a>
						</span>
					</h4>

					<p class="weui-media-box__desc">${note.remark}</p>
				</div>
			</div>

			@@ } }$$
		</div>

	</div>

	<!-- body 最后 -->
	<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
	<!-- 如果使用了某些拓展插件还需要额外的JS -->
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
	<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
	<script type="text/javascript" src="/static/js/zepto.min.js"></script>
	<script src="/static/js/swiper.js"></script>
	<script th:src="@{~/mobile/start/HomePage.js}"></script>
	<script>

        var notePhotoMap = new Map();
        $(document).ready(function() {
            var prefix = "http://" + window.location.host + "/";
			var recordid = $("#recordid").val();
			var recordPhotoGallery, recordPhotoButton = $('#recordPhotoItem');
			$.get("/mobile/repair/recordphoto/" + recordid , null, function(result){
                if(result.statusCode == 'NO'){
                    recordPhotoButton.text('查看图片(' + result.data.length + '张)');
                    var photoURLs = new Array();
                    $.each(result.data, function (i, photo) {
                        photoURLs.push(prefix + photo.url);
                    });
                    recordPhotoGallery = $.photoBrowser({
                        items: photoURLs
                    });
                }else{
                    $.toast("订单图片接收失败！", "forbidden");
                }
            });
            recordPhotoButton.on('click',function () {
                recordPhotoGallery.open();
            });

            var staffSelect = $("#staffSelect");
            if(staffSelect != null){
                var url = "/mobile/repair/staff/" + $("#areaid").text();
                $.get(url , null, function(result){
                    if(result.statusCode == 'NO'){
                        $.each(result.data, function (i, user) {
                            staffSelect.append('<option value="' + user.id + '">' + user.username + '</option>');
                        });
                    }else{
                        $.toast("员工信息接收失败！", "forbidden");
                    }
                });
            }
        });

        $(function() {
            var tmpl = '<li class="weui-uploader__file" src="#src#" style="background-image:url(#url#)"></li>',
                $gallery = $("#gallery"),
                $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles");


            $uploaderInput.on("change", function(e) {
                var src, url = window.URL || window.webkitURL || window.mozURL,
                    files = e.target.files;
                for(var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
                    if(url) {
                        src = url.createObjectURL(file);
                    } else {
                        src = e.target.result;
                    }
                    var base64;
                    r = new FileReader();
                    r.readAsDataURL(file);
                    r.onload = function(e) {
                        base64 = e.target.result;
                        $uploaderFiles.append($(tmpl.replace('#url#', src).replace('#src#', base64)));
                    };
                }
            });
            var index; //第几张图片
            $uploaderFiles.on("click", "li", function() {
                index = $(this).index();
                $galleryImg.attr("style", this.getAttribute("style"));
                $gallery.fadeIn(100);
            });
            $gallery.on("click", function() {
                $gallery.fadeOut(100);
            });
            //删除图片
            $(".weui-gallery__del").click(function() {
                $uploaderFiles.find("li").eq(index).remove();
            });
        });

		// $(function () {
        //     var $gallery = $("#gallery"),
        //         $galleryImg = $("#galleryImg"),
        //         $photoItem = $(".recordPhotoItem");
        //     $photoItem.on("click", function() {
        //         $galleryImg.attr("style", this.getAttribute("style"));
        //         $gallery.fadeIn(100);
        //     });
        //     $gallery.on("click", function() {
        //         $gallery.fadeOut(100);
        //     });
        // });

		function claim() {
		    var taskid = $("#taskid").val(), recordid = $("#recordid").val(), staffId = $("#staffId").val();
            if(staffId == undefined){
                staffId = $("#staffSelect").val();
            }
            $.post("/mobile/repair/claim", {taskId:taskid, staffId:staffId, recordId:recordid}, function(result){
                if(result.statusCode == 'NO'){
					$.toast("接管成功！");
                    window.location.href="/mobile/staff/homepage";
                }else{
                    $.toast("接管失败！", "forbidden");
                }
            });
        }

        function progress() {
            $.prompt({
                title: '输入记录内容',
                text: '请输入本次记录订单的详细内容,将与图片一起上传',
                input: '',
                empty: false, // 是否允许为空
                onOK: function (input) {
					//先处理图片上传问题，其中uploaderFiles中的li元素的src值即为图片base64码
					var imageList = new Array();
					$("#uploaderFiles li").each(function () {
						var tmp = $(this).attr("src").replace(',','@');
						imageList.push(tmp);
					});
					$.post("/mobile/repair/submitphoto", {imageList:imageList}, function(result){
						if(result.statusCode == 'NO'){
                            var taskid = $("#taskid").val(), recordid = $("#recordid").val(), urls = new Array();
                            $.each(result.data,function (i, image) {
								urls.push(image);
                            });
                            $.post("/mobile/repair/progress", {taskId:taskid, recordId:recordid, remark:input, urls:urls}, function(result){
                                if(result.statusCode == 'NO'){
                                    $.toast("记录成功！");
                                    window.location.href="/mobile/staff/homepage";
                                }else{
                                    $.toast("记录失败！", "forbidden");
                                }
                            });
						}else{
							$.toast("图片上传失败！", "forbidden");
						}
					});
                },
                onCancel: function () {
                    return false;
                }
            });
        }

        function unclaim() {
            var taskid = $("#taskid").val(), recordid = $("#recordid").val();
            $.post("/mobile/repair/unclaim", {taskId:taskid, recordId:recordid}, function(result){
                if(result.statusCode == 'NO'){
                    $.toast("撤手成功！");
                    window.location.href="/mobile/staff/homepage";
                }else{
                    $.toast("撤手失败！", "forbidden");
                }
            });
        }

        function complete() {
            var taskid = $("#taskid").val(), recordid = $("#recordid").val();
            //先处理图片上传问题，其中uploaderFiles中的li元素的src值即为图片base64码
            var imageList = new Array();
            $("#uploaderFiles li").each(function () {
                var tmp = $(this).attr("src").replace(',','@');
                imageList.push(tmp);
            });
            $.modal({
                title: "选择完成结果",
                text: "请选择本次完成订单的结果",
                buttons: [
                    { text: "修复", onClick: function () {
                            $.prompt({
                                title: '选择完成结语',
                                text: '请选择本次完成订单的结语,并与图片一起保存',
                                input: '',
                                empty: false, // 是否允许为空
                                onOK: function (input) {
                                    $.post("/mobile/repair/submitphoto", {imageList:imageList}, function(result){
                                        if(result.statusCode == 'NO'){
                                            var taskid = $("#taskid").val(), recordid = $("#recordid").val(), urls = new Array();
                                            $.each(result.data,function (i, image) {
                                                urls.push(image);
                                            });
                                            $.post("/mobile/repair/complete", {taskId:taskid, recordId:recordid, remark:input, success:"true", urls: urls}, function(result){
                                                if(result.statusCode == 'NO'){
                                                    $.toast("成功完成订单！");
                                                    window.location.href="/mobile/staff/homepage";
                                                }else{
                                                    $.toast("订单完成失败！", "forbidden");
                                                }
                                            });
                                        }else{
                                            $.toast("图片上传失败！", "forbidden");
                                        }
                                    });
                                },
                                onCancel: function () {
                                    return false;
                                }
                            });
                        } },
                    { text: "报废", onClick: function (input) {
                            $.prompt({
                                title: '选择完成结语',
                                text: '请选择本次完成订单的结语',
                                input: '',
                                empty: false, // 是否允许为空
                                onOK: function (input) {
                                    $.post("/mobile/repair/submitphoto", {imageList:imageList}, function(result){
                                        if(result.statusCode == 'NO'){
                                            var taskid = $("#taskid").val(), recordid = $("#recordid").val(), urls = new Array();
                                            $.each(result.data,function (i, image) {
                                                urls.push(image);
                                            });
                                            $.post("/mobile/repair/complete", {taskId:taskid, recordId:recordid, remark:input, success:"false", urls: urls}, function(result){
                                                if(result.statusCode == 'NO'){
                                                    $.toast("成功完成订单！");
                                                    window.location.href="/mobile/staff/homepage";
                                                }else{
                                                    $.toast("订单完成失败！", "forbidden");
                                                }
                                            });
                                        }else{
                                            $.toast("图片上传失败！", "forbidden");
                                        }
                                    });
                                },
                                onCancel: function () {
                                    return false;
                                }
                            });
                        } },
                    { text: "取消", className: "default", onClick: function(){ return false;} },
                ],
                autoClose: true
            });
        }

        function showNoteImage(noteId) {
		    var notePhotoGallery;
		    if(noteId in notePhotoMap){
                notePhotoGallery = notePhotoMap[noteId];
                if(notePhotoGallery.len == 0){
                    $.toast("暂无图片！", "forbidden");
                }
                else{
                    notePhotoGallery.gallery.open();
                }
			}
			else{
                var prefix = "/";
                $.get("/mobile/repair/notePhoto/" + noteId, null, function (result) {
                    if(result.statusCode == 'NO'){
                        var photoURLs = new Array();
                        $.each(result.data, function (i, photo) {
                            photoURLs.push(prefix + photo.url);
                        });
                        notePhotoGallery = {len: result.data.length,
							gallery: $.photoBrowser({
                                items: photoURLs
                            })};
                        notePhotoMap[noteId] = notePhotoGallery;

                        if(notePhotoGallery.len == 0){
                            $.toast("暂无图片！", "forbidden");
                        }
                        else{
                            notePhotoGallery.gallery.open();
                        }
                    }else{
                        $.toast("获取图片失败！", "forbidden");
                        return;
                    }
                });
			}
        }
	</script>
</body>
</html>